<script setup lang="ts">
import { useRouter } from "vue-router";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useUser } from "./utils/hook";
import { ref } from "vue";
defineOptions({
  name: "user"
});

const router = useRouter();
const treeRef = ref();
const tableRef = ref();

const {
  listTree,
  listTreeQuery,
  columns,
  listData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleFilter,
  handleNodeClick,
  getTreelist,
  getList,
  listLoading,
  roleData,
  defaultProps
} = useUser(tableRef, treeRef);
</script>

<template>
  <div class="user-box">
    <div class="left">
      <div class="left-top">
        <el-input
          v-model="listTreeQuery.deptName"
          size="large"
          placeholder="请输入部门名称搜索"
          clearable
        >
          <template #suffix>
            <el-icon class="el-input__icon" @click="getTreelist">
              <IconifyIconOffline icon="ri:search-line" />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="left-tree">
        <el-scrollbar height="calc(90vh - 500px)">
          <el-tree
            style="max-width: 600px"
            :data="listTree"
            :props="defaultProps"
            highlight-current
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="node.label"
                placement="top"
              >
                <span class="label-box" :title="node.label">
                  {{ node.label }}
                </span>
              </el-tooltip>
            </template>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="right-top-left">
          <el-form :inline="true" :model="listTreeQuery">
            <el-form-item>
              <el-select
                v-model="listTreeQuery.status"
                class="small"
                placeholder="请选择用户状态"
                clearable
                style="width: 240px"
                @change="handleFilter"
              >
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="listTreeQuery.roleId"
                placeholder="请选择角色"
                class="selectItem small"
                clearable
                style="width: 240px"
                @change="handleFilter"
              >
                <el-option
                  v-for="item in roleData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item prop="username" clearable>
              <el-input
                v-model.trim="listTreeQuery.username"
                placeholder="请输入用户名或姓名搜索"
                style="width: 240px"
                clearable
                class="searchInput"
                @keyup.enter.native="handleFilter"
                @change="handleFilter"
                @blur="handleFilter"
              >
                <template v-slot:suffix>
                  <i class="el-icon-search" @click="handleFilter" />
                  />
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="rigth-top-right">
          <el-button type="primary" :icon="useRenderIcon('Plus')">
            新增用户</el-button
          >
        </div>
      </div>
      <div class="right-content">
        <PureTableBar :columns="columns" @refresh="getList">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              ref="tableRef"
              row-key="id"
              adaptive
              :adaptiveConfig="{ offsetBottom: 108 }"
              align-whole="center"
              table-layout="auto"
              :loading="listLoading"
              :size="size"
              :data="listData"
              :columns="dynamicColumns"
              :pagination="{ ...pagination, size }"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button class="reset-margin" link type="primary">
                  查看
                </el-button>
                <el-button class="reset-margin" link type="primary">
                  修改
                </el-button>
                <el-button class="reset-margin" link type="primary">
                  删除
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import url("@/style/common.scss");

.user-box {
  //height: calc(100% + 16px);

  display: flex;

  .left {
    width: 232px;
    background-color: #fff;
    //height: 100%;
    margin: -16px 0 -16px -16px !important;

    .left-top {
      padding: 16px 16px 0 16px;
      margin-bottom: 16px;
    }
  }

  .right {
    width: calc(100% - 232px);
    margin: 0 16px 16px 16px !important;
    display: flex;
    flex-direction: column;

    .right-top {
      height: 68px;
      background: #ffffff;
      border-radius: 3px 3px 3px 3px;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      ::v-deep .el-form-item {
        margin-bottom: 0 !important;
      }
    }

    .right-content {
      flex: 1;
      margin-top: 16px;
      background-color: #fff;
      border-radius: 3px 3px 3px 3px;
    }
  }
}
</style>
